// 动态创建确认框
import { createVNode, render } from 'vue'
import XtxConfirm from './xtx-confirm.vue'

// 创建一个容器，用于后续插入提示框组件或者销毁提示框组件
const divVNode = createVNode('div', { class: 'xtx-confirm-container' })
// 写入到 body 中
render(divVNode, document.body)

// 获取写入后真实的DOM节点
const div = divVNode.el

// 预期调用：Confirm({ title: '温馨提示', text: '提示文本' })
// 返回 Promise 对象
export default ({ title, text }) => {
  return new Promise((resolve, reject) => {
    // 点击确认是执行的回调函数，对应 then()
    const confirmCallback = () => {
      render(null, div)
      resolve()
    }

    // 点击取消时执行的回调函数，对应 catch()
    const cancelCallback = () => {
      render(null, div)
      reject(new Error('点击取消'))
    }

    // 动态创建虚拟DOM
    const confirmVNode = createVNode(XtxConfirm, { title, text, confirmCallback, cancelCallback })

    // 写入到预留的容器中

    render(confirmVNode, div)
  })
}
